<script setup>
import { gameStateStore, boardOpenOrCloseStore } from '@/stores'
import { nextTick } from 'vue'
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const gameStateStore1 = gameStateStore()
const handleClickCloseFn = () => {
  boardOpenOrCloseStore1.changeReGame(false)
  handleClickStartFn()
}
const handleClickStartFn = async () => {
  gameStateStore1.changeStopMusicModelChange(true)
  boardOpenOrCloseStore1.changeFinalBoard(false)
  gameStateStore1.changeState()
  console.log('1' + gameStateStore1.gameState)
  await nextTick(() => {
    if (gameStateStore1.gameState) {
      //首次点击开始才会触发321的倒数组件
      boardOpenOrCloseStore1.changeCountDownBoard(true)
      setTimeout(() => {
        //当前正在游戏中，正在倒计时
        gameStateStore1.changeCountDownState(gameStateStore1.countDown + 1)
      }, 4000)
    } else {
      //要把倒计时暂停,第一次为false，然后在游戏状态时暂停一次变为1，再暂停变为2----，直到正常为o时，会变回false
      gameStateStore1.changePaused(gameStateStore1.isPaused + 1)
    }
  })
}
const handleClickReGameFn = async () => {
  //结束
  console.log('重玩')
  gameStateStore1.changeCountDownState(0)
  gameStateStore1.changePaused(0) //修改暂停，会自动清理定时器

  //关闭确认是否重玩页面
  boardOpenOrCloseStore1.changeReGame(false)
  //重新开始
  await nextTick(() => handleClickStartFn())
}
</script>
<template>
  <div class="final-page">
    <div class="final-box">
      <div class="title">温馨提示</div>
      <div class="final-content">
        <div>您确定要重玩吗？</div>
      </div>
      <div class="end-btn">
        <a-button
          @click="handleClickCloseFn"
          style="background-color: antiquewhite; margin-right: 20px"
          >取消</a-button
        >
        <a-button style="background-color: rgb(200, 255, 100)" @click="handleClickReGameFn"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.final-page {
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  .final-box {
    width: 500px;
    background: url('./../../../assets/board.jpg') no-repeat center center;
    background-size: 100% 100%;
    .title {
      position: relative;
      text-align: center;
      padding: 20px 0;
      border-bottom: 5px rgb(187, 121, 60) solid;
      font-size: 40px;
      color: rgb(253, 66, 66);
    }
    .final-content {
      padding: 0 20px;
      font-size: 30px;
      > div {
        padding: 10px;
      }
      .congratulation {
        color: rgb(253, 66, 66);
        font-size: 40px;
      }
    }
    .end-btn {
      padding: 30px 20px;
      text-align: end;
    }
  }
}
</style>
